<template>
  <div class="acetion">
    <el-tabs>
      <!-- tabs栏切换 -->
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="全部订单" name="second"></el-tab-pane>
        <el-tab-pane label="待支付" name="payment"></el-tab-pane>
        <el-tab-pane label="待发货" name="deliver"></el-tab-pane>
        <el-tab-pane label="待收货" name="third"></el-tab-pane>
        <el-tab-pane label="已完成" name="first"></el-tab-pane>
      </el-tabs>
      <el-form :model="form" ref="pwdFormRef">
        <!-- input输入框 -->
        <el-form-item>
          <el-input v-model="form.text" placeholder="请输入搜索内容"></el-input>
        </el-form-item>
        <!-- 时间选择 -->
        <el-form-item>
         <el-date-picker
      v-model="form.value1"
      type="month"
      placeholder="选择月">
    </el-date-picker>
    </el-form-item>
        <!-- 下面数据 -->
        <el-button class="chencat" @click="hemit">搜索</el-button>
        <el-button class="acction" @click="hubmect">重置</el-button>
      </el-form>
      <el-table :data="list" style="width: 100%">
        <el-table-column
          label="订单号"
          prop="mainOrderId"
          style="width: 20%"
        >
        </el-table-column>
        <el-table-column
          label="用户昵称"
          prop="userNick"
          style="width: 10%"
        >
        </el-table-column>
        <el-table-column
          label="商品信息"
          prop="subOrderInfos[0].commodityTitle"
          style="width: 10%"
        >
        </el-table-column>
        <el-table-column
          label="实际支付"
          prop="totalPrice"
          style="width: 10%"
        >
        </el-table-column>
        <el-table-column label="订单状态" style="width: 180px" prop="status">
          <template v-slot="{ row }">
            <el-tag
              :type="
                row.status === 'PaySuccess'
                  ? 'success'
                  : 'info' && row.status === 'InDelivery'
                  ? 'warning'
                  : 'info' && row.status === 'Receipt'
                  ? 'primary'
                  : 'info' && row.status === 'WaitPay'
                  ? 'danger'
                  : 'info'
              "
              disable-transitions
            >
              {{ formatEmployment(row.status) }}
            </el-tag>
          </template>
        </el-table-column>

        <el-table-column label="创建时间" prop="createTime" style="width: 10%">
        </el-table-column>
        <el-table-column  fixed="right" label="操作">
          <template v-slot="{ row }">
            <el-button
              type="text"
              size="small"
              @click="chenchy(row)"
              >查看详细</el-button
            ><el-button
            :disabled="row.status == 'PaySuccess' ? false : true"
             v-show="lastname != 'cms'"
              type="text"
              size="small"
              @click="hdeliver(row)">
             确定发货
              </el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        class="lyx"
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="q.index"
        :page-size="2"
        layout="prev, pager, next, jumper"
      >
      </el-pagination>
    </el-tabs>
        <!-- 确定发货组件 -->
         <el-dialog title="订单详细"
      class="acvter"
     :destroy-on-close='true' 
     :close-on-click-modal='false'
     :visible.sync="dialogFormVisib">
     <Deliver @close='hclone' :childata="childata"></Deliver>
     </el-dialog>
  </div>
</template>

<script>
import { userlogin } from "@/api/roles";
import Deliver from './components/deliver.vue'
import employeesConst from "@/constant/employees";
const hireTypeMap = {};
employeesConst.hireaitem.forEach((item) => {
  hireTypeMap[item.status] = item.value;
});

export default {
  components:{Deliver},
  data() {
    return {
      lastname:'',
      childata:{},
      dialogTableVisible: false,
      dialogFormVisib:false,
      list: [],
      form:{
        sg:'',
        status: null,
        value1: "",
        text:''
      },
      activeName: "second",
      q: {
        index: 1,
        size: 10,
        searchText:'',
        searchCommodityNumber:100,
        startTime:'',
        endTime:''
      },
    };
  },
  created() {
    this.loacher();
  },
  methods: {
    async loacher() {
      this.lastname = this.$cookies.get('name')
      const res = await userlogin(this.q);
      // console.log('74',res.data);
      this.list = res.data.data;
    },
    // 确定发货
    async hdeliver(row) {
      this.dialogFormVisib = true
      this.childata = row
    },
    // 取消
    hclone(){
      this.dialogFormVisib = false
      this.loacher();
    },
    // 搜索
    hemit() {
     
      // console.log('a',this.form.text);
      this.q.searchText = this.form.text

if(this.form.value1){
  //  this.timer = []
        let date = new Date(this.form.value1);
       let Yr = date.getFullYear()
      // this.timer.push(Yr)
       let Mn = date.getMonth()+1
      
      if(Mn<10){
        Mn="0"+Mn
      }

      // this.timer.push(Mn)
      // this.timer.push(My)
      this.form.value1 = Yr+'-'+Mn+'-'+'01'+" "+'00'+':'+'00'+':'+'00'
      this.form.sg = Yr+'-'+Mn+'-'+'31'+" "+'23'+':'+'59'+':'+'59'
      // this.form.value1 = this.timer.join('-') +''+''+'00'+':'+'00'+':'+'00'
        this.q.startTime = this.form.value1
        this.q.endTime = this.form.sg
       }
        this.loacher()
    },
    
    // 重置
    hubmect(){
      this.q.index = 1
      this.q.startTime = ''
      this.q.searchText = ''
      this.q.endTime = ''
      this.form.text = ''
      this.form.sg = ''
      this.form.value1 = ''
      this.loacher()
    },
    // 查看详细
    chenchy(row) {
      this.$router.push({
        path: "/home/particulars",
        query: { row },
      });
    },
    // 订单状态
    formatEmployment(code) {
      return hireTypeMap[code];
    },
    // tab栏切换
    handleClick(vall) {
      console.log(vall.name);
      if (vall.name === "second") {
       this.q.orderStatus = null;
       this.q.index = 1
        this.loacher();
      } else if (vall.name == "payment") {
        this.q.orderStatus = "WaitPay";
       this.q.index = 1
        this.loacher();
      } else if (vall.name == "deliver") {
        this.q.orderStatus = "PaySuccess";
       this.q.index = 1
        this.loacher();
      } else if (vall.name === "third") {
        this.q.orderStatus = "InDelivery";
       this.q.index = 1
        this.loacher();
      } else {
        this.q.orderStatus = "Receipt";
       this.q.index = 1
        this.loacher();
      }
    },
    // 分页
    handleCurrentChange(index) {
      this.q.index = index;
      this.loacher();
  
    },
    handleSizeChange(size) {
      this.q.size = size;
      this.loacher();

    },
  },
};
</script>

<style scoped>
.acetion {
  background-color: #fff;
  padding: 10px 10px 10px 30px;
  /* overflow: hidden; */
}
.hceants {
  color: #ff7144;
}
.el-form-item {
  display: inline-block;
  margin-right: 20px;
}
.el-date-editor {
  width: 230px;
  margin-right: 20px;
}
.chencat {
  background-color: #ff7144;
  border: 1px solid #ff7144;
  color: #fff;
}

.accehont {
  margin-top: 20px;
  margin-left: 75%;
}
.acction:hover {
  background-color: rgb(255, 248, 243);
  color: #ff7144;
  border: 1px solid rgb(255, 190, 132);
}
.acction:focus {
  background-color: rgb(255, 248, 243);
  color: #ff7144;
  border: 1px solid rgb(255, 190, 132);
}
/* tabs栏切换 */
::v-deep .is-active {
  color: #ff7144 !important;
}
::v-deep .el-tabs__item:hover {
  color: #ff7144 !important;
}
::v-deep .el-tabs__active-bar {
  background-color: #ff7144 !important;
}
.el-button--small{
  font-size: 14px;
}
::v-deep .el-dialog{
  width: 400px;
  margin-top: 12% !important;
}
</style>
